<template>
   <div class="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="@/static/img/logo.png">12345
                </a>
                <div class="visible-xs">
                    <div class="pull-right nav-list">
                        <span id="offCanvasShow" class="glyphicon glyphicon-align-justify" style="color: white;"></span>
                    </div>
                </div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="javascript:;">今日台数：{{headInfo.order_num || 0}}</a>
                    </li>
                    <li>
                        <a href="javascript:;">人数：{{headInfo.sum_num || 0}}</a>
                    </li>
                    <li>
                        <a href="javascript:;">营业额：¥{{headInfo.sum_paid || 0}}</a>
                    </li>
                    <li>
                        <a href="javascript:;">实收：¥{{headInfo.sum_price || 0}}</a>
                    </li>
                    <li>
                        <a @click="reset" href="javascript:;">刷新</a>
                    </li>
                    <li>
                        <a href="javascript:;">{{headInfo.nickname}}</a>
                    </li>
                    <li>
                        <a @click="logout" href="javascript:;">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { axios, openWindow } from "@/static/js/utils";
export default {
  name: "Navbar",
  data() {
    return {
      headInfo: {}
    };
  },
  methods: {
    logout() {
      axios.post("login/out").then(res => {
        if (res.data.code) {
          localStorage.clear();
          openWindow('login.html', '登录', {}, 'false')
        }
      });
    },
    reset(){
      this.$parent.getlist()
    }
  },
  created() {
    axios.get("table/head_read").then(res => {
      this.headInfo = res.data.data;
    });
  },
  mounted() {
    mui.plusReady(function() {
      var main, menu;
      main = plus.webview.currentWebview();
      setTimeout(function() {
        menu = mui.preload({
          id: "nav-menu",
          url: "nav-menu.html",
          styles: {
            left: "100%",
            width: "70%",
            zindex: 9997
          }
        });
        menu.hide();
      }, 300);
      //打开侧边菜单
      document
        .getElementById("offCanvasShow")
        .addEventListener("tap", function() {
          main.setStyle({
            mask: "rgba(0,0,0,0.5)"
          });
          menu.show();
          menu.setStyle({
            left: "30%",
            transition: {
              duration: 200
            }
          });
        });
      //关闭侧边菜单
      main.addEventListener("maskClick", function() {
        main.setStyle({
          mask: "none"
        });
        menu.setStyle({
          left: "100%",
          transition: {
            duration: 200
          }
        });
      });
    });
  }
};
</script>
<style scoped>
.nav > li > a:focus,
.nav > li > a:hover {
  background: none;
}
</style>

